/* {[The file is published on the basis of YetiForce Public License 3.0 that can be found in the following directory: licenses/LicenseEN.txt or yetiforce.com]} */
.basePanel, .bodyContents, .mainContainer, .contentsDiv {
	min-height: 100%;
}

.bodyContent {
	min-height: 100%;
	height: 100%;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 15px;

	@include media-breakpoint-down(xs) {
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
}

@include media-breakpoint-down(xs) {
	.ps__rail-x, .ps__rail-y {
		display: none !important;
	}
}

%input-groupSelect2 {
	.input-group {
		flex-wrap: nowrap;
	}
}

.c-panel {
	@extend .card;
	@extend .mb-2;

	&__header {
		@extend .card-header;
		@extend .u-cursor-pointer;
		@extend .px-0;
		@extend .py-1;
	}

	&__body {
		@extend .card-body;
		@extend .px-1;
		@extend .py-0;
		@extend .col-md-12;
	}

	&__label {
		@extend .border-right;
		@extend .d-flex;
		@extend .justify-content-sm-start;
		@extend .justify-content-lg-end;
		@extend .col-sm-12;

		label {
			line-height: 1.7;
			margin-bottom: 0;
		}
	}

	&--edit {
		.row {
			margin: 0;
		}

		.c-panel__body--edit {
			@extend .px-0, .pt-1;

			[class^="col-"], [class*=" col-"] {
				@extend .px-1;
			}
		}
	}
}

.c-badge__icon {
	@extend .rounded-circle;
	@extend .text-white;
	@extend .text-center;

	width: 32px;
	height: 32px;
	line-height: 30px;
	font-size: 17px;
}

.c-badge--md {
	font-size: 90%;
}

.c-badge--top-right {
	position: absolute;
	top: -5px;
	right: 0;
	z-index: 100;
}

.childrenMarginRight > * {
	@extend .mr-2;
}

.childrenMarginTopX > * {
	@extend .mt-2;
	@extend .mx-1;
}

.card {
	.blockHeader {
		@extend .d-inline-flex;
	}
}

.c-multi-image__preview-img {
	height: 2rem;
	width: 2rem;
	cursor: pointer;
	background-size: cover;
	background-position: center;
}

.c-multi-image__popover-img {
	cursor: pointer;
}

.c-multi-image__drop-effect {
	background: rgba($blue, 0.2);
	border: $border-width solid rgba($blue, 0.5) !important;
}

.c-btn-collapsible {
	overflow: hidden;
	white-space: nowrap;
	max-width: calculate-rem(40px);
	white-space: nowrap;
	@include u-transition(all 275ms ease);

	&.btn-xs {
		max-width: calculate-rem(25px);
	}

	&.btn-sm {
		max-width: calculate-rem(30px);
	}

	&.btn-lg {
		max-width: calculate-rem(50px);
	}

	&__text {
		opacity: 0;
		text-indent: -6px;
		display: inline-block;
		@include u-transition(all 275ms ease);
	}

	&:hover {
		max-width: calculate-rem(300px) !important;
		@include u-transition(all 275ms ease);

		.c-btn-collapsible__text {
			opacity: 1;
			text-indent: 0;
			@include u-transition(all 275ms ease);
		}
	}
}

.btn-group-toggle.btn-group-sm {
	.c-btn-collapsible {
		max-width: calculate-rem(35px);
	}
}

.popover-footer {
	padding: $popover-header-padding-y $popover-header-padding-x;
	margin-bottom: 0; // Reset the default from Reboot
	font-size: $font-size-base;
	color: $popover-header-color;
	background-color: $popover-header-bg;
	border-top: $popover-border-width solid darken($popover-header-bg, 5%);
	$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});

	@include border-bottom-radius($offset-border-width);
}

// bootstrap carousel
.c-carousel {
	.c-carousel__prevnext-btn {
		top: 42%;
		bottom: auto;
		background: rgba(0, 0, 0, 0.25);
		border: 1px solid rgba(255, 255, 255, 0.5);
		opacity: 0.75;
		height: 60px;
		width: 60px;
		border-radius: 100%;
		margin: 0 20px;
		transition: all 100ms;

		&:active {
			transform: scale(0.85, 0.85);
		}
	}
}

//action dropdowns
.rightRecordActions,
.leftRecordActions {
	white-space: nowrap;

	> div {
		display: inline-block;
	}

	.actions {
		display: inline-block;
		margin: 0 0.25rem;

		.dropdown-menu {
			padding: 0.2rem;
			margin-top: -0.2rem;
			min-width: unset;

			.btn-group {
				vertical-align: top;
			}

			.btn-xs {
				@extend .btn-sm;
			}
		}
	}
}

// improved table display on mobile
@include media-breakpoint-down(xs) {
	table {
		td, th {
			padding: 0.25rem !important;
		}
	}
}


.c-float-label {
	&__container {
		@extend .d-flex, .justify-content-center, .position-relative;

		.form-control {
			width: 100%;
			border-radius: 0.25rem;
		}
	}

	&__label {
		position: absolute;
		left: 0;
		cursor: text;
		font-size: 75%;
		top: -1.5em;
		z-index: 3;
		line-height: 1;
		color: #000;
		padding: 0 1px;
	}

	&__label::after {
		content: " ";
		display: block;
		position: absolute;
		background: #fff;
		height: 2px;
		top: 62%;
		left: -.2em;
		right: -.2em;
		z-index: -1;
	}

	&__hidden-ph {
		visibility: hidden;
		font-size: 75%;
	}
}

//Image
.c-img {
	&__user {
		width: auto;
		height: calculate-rem(40px);
	}

	&__completion {
		width: inherit;

		&[src=""] {
			display: none;
		}

		&__container {
			width: calculate-rem(30px);
			height: fit-content;
			margin: auto calculate-rem(5px) auto 0;
		}
	}

}

.c-popover--link {
	max-width: 30%;

	.popover-body {
		padding: 0;
		border-top-left-radius: calc(0.3rem - 1px);
		border-top-right-radius: calc(0.3rem - 1px);
	}

	label,
	&__label {
		margin: 0;
		font-weight: bold;
	}

	&.bs-popover-bottom .arrow {
		&::after,
		&::before {
			border-bottom-color: $light;
		}
	}

	&__header {
		display: flex;
		align-items: center;
		border-top-left-radius: 0.3rem;
		border-top-right-radius: 0.3rem;

		&__buttons {
			padding-left: .25rem;
			margin-left: auto;
		}
	}
}

.c-circle-icon {
	height: calculate-rem(30px);
	width: calculate-rem(30px);
	max-width: calculate-rem(30px);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;

	[class^="userIcon-"],
	.adminIcon-user,
	.adminIcon-user {
		font-size: calculate-rem(20px);;
	}
}

.c-icon--tripple {
	width: calculate-rem(40px);
	display: inline-block;
	font-size: .75em;

	&__left, &__right, &__top {
		position: relative;
	}

	&__left, &__right {
		top: 5px;
	}

	&__left {
		left: -15px;
	}

	&__right {
		left: -12px;
	}

	&__top {
		top: -7px;
		left: 5px;
	}
}

[contenteditable=true] {
	&:empty:after {
		content: attr(placeholder) !important;
		color: #6c757d !important;
		display: block !important; /* For Firefox */
	}

	&.form-control {
		height: auto !important;
		min-height: calc(2.25rem + 2px);
	}
}

.c-textarea--completions {
	height: 0;
	visibility: hidden;
	position: relative;
	top: calculate-rem(15px)
}

.c-completions {
	color: #808080;
	font-size: 14px;

	&__item {
		@extend .mr-1;
		cursor: pointer;
	}
}

.js-completions__emojis {
	.EmojiPanel {
		display: none;
	}

	&.active {
		.EmojiPanel {
			display: block;
		}
	}
}

.EmojiPanel {
	position: absolute;
	z-index: 90000000;
	transform: translateY(calc(-100% - #{calculate-rem(15px)}));

	.EmojiPanel__brand {
		display: none;
	}

	.fa-search {
		display: none;
	}
}

.c-range-slider {
	-webkit-appearance: none;
	margin: 10px 0;
	width: 100%;
}

.c-range-slider:focus {
	outline: none;
}

.c-range-slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	background: $gray-200;
	border-radius: 10px;
	border: 0px solid #000101;
}

.c-range-slider::-webkit-slider-thumb {
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	border: 0px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 0.25rem;
	background: $primary;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -7px;
}

.c-range-slider:focus::-webkit-slider-runnable-track {
	background: $gray-200;
}

.c-range-slider::-moz-range-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	background: $gray-200;
	border-radius: 10px;
	border: 0px solid #000101;
}

.c-range-slider::-moz-range-thumb {
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	border: 0px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 0.25rem;
	background: $primary;
	cursor: pointer;
}

.c-range-slider::-ms-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	border-width: 39px 0;
	color: transparent;
}

.c-range-slider::-ms-fill-lower {
	background: $gray-200;
	border: 0px solid #000101;
	border-radius: 10px;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

.c-range-slider::-ms-fill-upper {
	background: $gray-200;
	border: 0px solid #000101;
	border-radius: 10px;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}

.c-range-slider::-ms-thumb {
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	border: 0px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 0.25rem;
	background: $primary;
	cursor: pointer;
}

.c-range-slider:focus::-ms-fill-lower {
	background: $gray-200;
}

.c-range-slider:focus::-ms-fill-upper {
	background: $gray-200;
}

.c-gantt-header__option {
	max-width: 200px;
}

input[type="checkbox"][readonly],
input[type="checkbox"][disabled] {
	background-color: material-color('grey', '200');
}
